<template>
  <div class="suggests">
    <el-table
      :data="proposalListDtos"
      style="width: 100%"
      :border="true"
      :highlight-current-row="true"
    >
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.proposal_id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.user_id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户名字" width="100" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.nick_name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="120" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.proposal_phone }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.proposal_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="建议主题" width="220" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.proposal_theme }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="建议内容" header-align="center">
        <template slot-scope="scope" align="left">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.proposal_content }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="160" align="center"></el-table-column> -->
    </el-table>
    <!-- 列表 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message, popconfirm } from 'element-ui'
import { getToken, getAccount } from '@/utils/auth'
export default {
  data() {
    return {
      rules: {},
      proposalListDtos: [],
      currentPage: 1, // 初始页
      pagesize: 8, // 当前页面内的列表行数
      pageNum: 1, // 总数页数，
      total: 0,
      dialogFormVisible: false,
      temp: {
        proposal_id: '',
        user_name: '',
        user_id: '',
        proposal_content: '',
        proposal_time: '',
        proposal_theme: '',
        proposal_phone: ''
      },
      pickerOptions: {
        // 限制时间为当前
        disabledDate(time) {
          time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          time.getTime() < Date.now() + 24 * 60 * 60 * 1000
          return time
        }
      }
    }
  },
  mounted() {
    this.getSuggestList()
  },
  methods: {
    // 手机号验证
    phoneNum() {
      var pattern = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/
      var str = this.$refs['phoneNums'].value
      if (pattern.test(str) !== true) {
        Message({
          message: '手机号格式不正确',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getSuggestList()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getSuggestList()
    },
    // 获取所有列表
    getSuggestList() {
      return request({
        url: '/v3/proposal/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: {
          current_page: this.currentPage,
          page_size: this.pagesize,
          proposal_id: 0,
          community_id: 5
        }
      }).then(res => {
        this.currentPage = res.current_page
        this.pageNum = res.pages
        this.total = res.total_record
        this.proposalListDtos = []
        res.proposalListDtos.map((value, index) => {
          var d = new Date(value.proposal_time)
          value.proposal_time =
            d.getFullYear() +
            '-' +
            (d.getMonth() + 1) +
            '-' +
            d.getDate() +
            ' ' +
            d.getHours() +
            ':' +
            d.getMinutes() +
            ':' +
            d.getSeconds()
        })
        this.proposalListDtos = res.proposalListDtos
      })
    }
  }
}
</script>
<style lang= "scss" scoped>
.suggests {
  margin-top: 50px;
  overflow: hidden;
}
.suggests_nav {
  height: 60px;
  width: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 20px;
}
</style>
